<template>
  <div class="content">
    <div class="register-box">
      <div class="hd">
        <h3 class="title semibold">库尔勒市中小学入学服务平台</h3>
      </div>
      <div class="bd inner fn-clearfix">
        <div class="register">
          <div class="register-tips">
            <h3>
              {{ isDelayApply ? "延缓入学注册" : "新用户注册" }}
            </h3>
            <div
              class="register-bd-fr"
              :class="{ registerdelay: isDelayApply }"
            >
              已有账号，<router-link :to="{ path: '/zmkm' }"
                >马上登录</router-link
              >
            </div>
          </div>
          <p
            v-if="isDelayApply"
            style="
              color: #ff0000;
              font-size: 14px;
              margin-left: 15px;
              font-family: PingFangSC-Regular;
            "
          >
            仅本市户口适龄儿童可进行申请
          </p>
          <van-form @submit="submitForm" class="van-cell-input_right">
            <div class="form-menu">
              <!-- 是否有户口 -->
              <van-cell
                title="是否有户口"
                is-link
                :value="auditOrig(ruleForm.ogState)"
                @click="showPopupOrig"
                class="van-cell_value4"
                v-if="!isDelayApply"
              />
              <!-- 入学类型 -->
              <van-cell
                title="入学类型"
                is-link
                :value="regType"
                @click="showPopupRegType"
                class="van-cell_value4"
                v-if="!isDelayApply"
              />
              <!-- 学生姓名 -->
              <van-field
                label="学生姓名"
                v-model="ruleForm.name"
                name="name"
                placeholder="请输入学生姓名"
                :rules="[{ required: true, message: '请输入学生姓名' }]"
                style="padding-right: 20px"
              >
              </van-field>
              <!-- 身份证号 -->
              <van-field
                v-if="ruleForm.regType != 'reg10' && ruleForm.ogState == '1'"
                label="身份证号"
                v-model="ruleForm.idNo"
                name="idNo"
                placeholder="请输入身份证号"
                @change="idChange"
                style="padding-right: 20px"
                :rules="[
                  {
                    required: true,
                    pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
                    message: '请输入正确的身份证号',
                  },
                ]"
              >
              </van-field>
              <!-- 证件号 -->
              <van-field
                v-if="ruleForm.regType == 'reg10'"
                label="证件号"
                v-model="ruleForm.idNo"
                name="idNo"
                placeholder="请输入证件号"
                :rules="[{ required: true, message: '请输入证件号' }]"
                style="padding-right: 20px"
              >
              </van-field>
              <!-- 性别 -->
              <van-field
                label="性别"
                v-model="ruleForm.gender"
                name="gender"
                is-link
                placeholder="请选择学生性别"
                @focus="showSexChoice = true"
                :rules="[
                  {
                    required: true,
                    message: '请选择学生性别',
                  },
                ]"
                :disabled="
                  ruleForm.regType != 'reg10' && ruleForm.ogState != '0'
                "
                readonly
              >
              </van-field>
              <van-action-sheet
                v-model="showSexChoice"
                :round="false"
                :actions="genderes"
                @select="onSelectSex"
              ></van-action-sheet>
              <!-- 出生日期 -->
              <van-field
                label="出生日期"
                v-model="ruleForm.birth"
                name="birth"
                is-link
                placeholder="请选择出生日期"
                @focus="showBirthChoice = true"
                :rules="[{ required: true, message: '请选择出生日期' }]"
                :disabled="
                  ruleForm.regType != 'reg10' && ruleForm.ogState != '0'
                "
                readonly
              >
              </van-field>
              <!-- <p
                class="el-form-infos"
                style="padding-left: 10px; text-align: left"
              >
                要求出生日期在[{{ ruleForm.BirthBegin }}]和[{{
                  ruleForm.BirthEnd
                }}]之间
              </p> -->
              <van-popup
                v-model="showBirthChoice"
                position="bottom"
                :style="{ height: '30%' }"
              >
                <van-datetime-picker
                  v-model="currentDate"
                  type="date"
                  title="选择年月日"
                  :min-date="formatBirthBegin"
                  :max-date="formatBirthEnd"
                  @cancel="showBirthChoice = false"
                  @confirm="confirmBirth()"
                />
              </van-popup>
              <!-- 手机号 -->
              <van-field
                label="手机号"
                v-model="ruleForm.phone"
                name="phone"
                placeholder="用于接受系统通知短信"
                :rules="[
                  {
                    pattern: /^1[34578]\d{9}$/,
                    required: true,
                    message: '请输入正确的手机号码',
                  },
                ]"
                style="padding-right: 20px"
              >
              </van-field>
              <p
                class="el-form-infos"
                style="padding-left: 0; padding-bottom: 0"
              >
                请勿使用199，166等新号段的号码，无法发送短信
              </p>
              <!-- 密码 -->
              <van-field
                class="password"
                label="密码"
                v-model="ruleForm.pwd"
                :type="password"
                name="pwd"
                placeholder="请输入"
                :rules="[
                  {
                    pattern: /(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^.{6,20}$/,
                    required: true,
                    message: '密码格式不正确',
                  },
                ]"
                style="padding-right: 20px"
              >
              </van-field>
              <p
                class="el-form-infos"
                style="padding-left: 0; padding-bottom: 0"
              >
                密码由6-20位数字或字母或特殊字符中的两种组成
              </p>
              <!-- 确认密码 -->
              <van-field
                label="确认密码"
                v-model="ruleForm.repPwd"
                :type="repassword"
                name="repPwd"
                placeholder="请确认密码"
                :rules="[
                  {
                    validator: validatorPwd,
                    required: true,
                    message: '请确认密码是否一致!',
                  },
                ]"
                style="padding-right: 20px"
              >
              </van-field>
            </div>
            <div class="bottom-wrap" :class="{ 'delay-bottom': isDelayApply }">
              <div class="promise-terms">
                <div class="trems-title">承诺条款：</div>
                <div class="terms-text">
                  <div v-if="isDelayApply">
                    <p class="el-form-infos" style="padding: 0">
                      我确认以上信息准确无误，自愿申请延缓入学，如有虚假，愿意承担相关法律责任。
                    </p>
                  </div>
                  <div v-else>
                    <p class="el-form-infos" style="padding: 0">
                      1、我符合现在选择的入学类型。
                    </p>
                    <p class="el-form-infos" style="padding: 0">
                      2、在库尔勒市有合法稳定住所，工作生活。
                    </p>
                    <p class="el-form-infos" style="padding: 0">
                      3、我提供的信息真实有效，如有虚假愿意承担后果，包括法律责任。
                    </p>
                    <p class="el-form-infos" style="padding: 0">
                      4、报名时愿意提供真实图片资料，并且服从系统审核、派位结果。
                    </p>
                  </div>
                </div>
                <div class="terms-agree">
                  <van-checkbox
                    v-model="isChecked"
                    shape="square"
                    checked-color="#0195FF"
                  >
                    <template>
                      我承诺自觉履行以上条款，并且已阅读和同意
                      <span class="span" @click="goPrivacy('agreement')">
                        《用户服务协议》</span
                      >、
                      <span class="span" @click="goPrivacy('police')"
                        >《隐私政策》</span
                      >
                      <!-- <router-link
                        class="span"
                        :to="{
                          path: '/privacy',
                          query: { isPrivacy: 'agreement' },
                        }"
                        >《用户服务协议》</router-link
                      >
                      、<router-link
                        class="span"
                        :to="{
                          path: '/privacy',
                          query: { isPrivacy: 'police' },
                        }"
                        >《隐私政策》</router-link
                      > -->
                    </template>
                  </van-checkbox>
                </div>
              </div>
              <div class="form-btn">
                <van-button
                  :class="{ active: isChecked }"
                  round
                  block
                  type="info"
                  :disabled="!isChecked"
                  native-type="submit"
                  >提交注册</van-button
                >
              </div>
            </div>
          </van-form>
        </div>

        <!-- 是否有户籍 -->
        <van-popup v-model="showOrig" position="bottom">
          <van-field name="ogState" label="" class="van-cell-nobod">
            <template #input>
              <van-radio-group
                v-model="ruleForm.ogState"
                @change="changeNoOrig"
              >
                <p class="noOrig-tips">
                  如果孩子未办理户口，入学类型请按家长的户口选择，如果已经办理，请不要勾选无户口。
                </p>
                <van-radio class="noOrig-choice" name="1">有户口</van-radio>
                <van-radio class="noOrig-choice" name="0">无户口</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <div class="footer-btn">
            <van-button type="default" @click="hidePopup">取消</van-button>
            <van-button plain type="primary" @click="hidePopup"
              >确定</van-button
            >
          </div>
        </van-popup>
        <!-- 入学类型 -->
        <van-popup v-model="showRegType" position="bottom">
          <van-field name="regType" label="" class="van-cell-nobod">
            <template #input>
              <van-radio-group
                v-model="ruleForm.regType"
                @change="auditRegType(ruleForm.regType)"
              >
                <van-row
                  class="reg-row"
                  v-for="item in regTypesArray"
                  :key="item.id"
                >
                  <van-radio :name="item.code">{{ item.text }}</van-radio>
                  <p class="el-form-infos">
                    {{ item.remark }}
                  </p>
                </van-row>
              </van-radio-group>
            </template>
          </van-field>
          <div class="footer-btn">
            <van-button type="default" @click="hidePopup">取消</van-button>
            <van-button plain type="primary" @click="hidePopup"
              >确定</van-button
            >
          </div>
        </van-popup>
        <!-- 去登录 -->
        <van-popup
          v-model="showGoLogin"
          :style="{ width: '73%' }"
          class="success-regist"
          :close-on-click-overlay="false"
        >
          <div class="success-title">
            <div class="icon">
              <van-icon name="success" />
            </div>
            <div class="success-tips">注册成功</div>
          </div>
          <div class="success-text">
            请用身份证号<span>{{ idno }}</span>
            【去登录】继续填写报名信息！
          </div>
          <div class="gologin-btn">
            <van-button type="default" @click="goLogin">去登录</van-button>
          </div>
        </van-popup>
      </div>
    </div>
  </div>
</template>
<script>
// import { Toast, Dialog } from "vant";
import localDb from "../utils/localDb";
import { getAnalysisIdCard } from "../utils/util";
import { formatDate } from "../utils/formatdate.js";
import { getSysZt } from "../utils/api";
export default {
  name: "Register",
  components: {},
  data() {
    return {
      ruleForm: {
        ogState: "1",
        regType: "",
        name: "",
        idNo: "",
        gender: "",
        birth: "",
        phone: "",
        pwd: "",
        repPwd: "",
      },
      showOrig: false, //显示是否有户籍
      showRegType: false, //显示入学类型选择
      regType: "请选择", //选中的入学类型
      showSexChoice: false, //显示性别选择
      genderes: [{ name: "男" }, { name: "女" }],
      currentDate: new Date(), //当前选中的出生日期
      showBirthChoice: false, //显示日期选择
      isChecked: false,
      formatBirthBegin: "", //最早出生日期
      formatBirthEnd: "", //最晚出生日期
      isPwd: true, //是否显示密码
      password: "password", //密码输入框类型
      repassword: "password", //密码输入框类型
      showGoLogin: false, //显示去登录
      regTypesArr: [],
      idno: "",
      patternIdNo: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
      patternPhone: /^1[34578]\d{9}$/,
    };
  },
  methods: {
    getRegType(type) {
      this.$fetch("/api/Student/GetSysCode", { type: type }, "get").then(
        (data) => {
          if (data.res == 0) {
            this.regTypesArr = data.data;
          }
        }
      );
    },
    submitForm(values) {
      if (!this.isDelayApply) {
        if (this.ruleForm.regType) {
          let params = this.ruleForm;
          this.$fetch("/api/Student/StudReg", params, "post").then((data) => {
            if (data.res == 0) {
              this.idno = data.data.idno;
              this.showGoLogin = true;
            } else {
              this.$toast(data.msg);
            }
          });
        } else {
          this.$toast("请选择入学类型");
          return false;
        }
      } else {
        let params = {
          name: this.ruleForm.name,
          idno: this.ruleForm.idNo,
          gender: this.ruleForm.gender,
          birth: this.ruleForm.birth,
          phone: this.ruleForm.phone,
          pwd: this.ruleForm.pwd,
          repPwd: this.ruleForm.repPwd,
        };
        this.$fetch("/api/Student/StudDelayReg", params, "post").then(
          (data) => {
            if (data.res == 0) {
              this.idno = data.data.idno;
              this.showGoLogin = true;
            } else {
              this.$toast(data.msg);
            }
          }
        );
      }
      // this.$router.push({ path: "/zmkm" });
    },
    showPopupOrig() {
      this.showOrig = true;
    },
    showPopupRegType() {
      this.showRegType = true;
    },
    hidePopup() {
      this.showRegType = false;
      this.showOrig = false;
    },
    auditOrig(type) {
      switch (type) {
        case "1":
          return "有户口";
        case "0":
          return "无户口";
        case "":
          return "请选择";
        default:
          break;
      }
    },
    auditRegType(type) {
      this.regTypesArr.forEach((item) => {
        if (item.code == type) {
          this.regType = item.text;
        }
      });
    },
    //选择性别
    onSelectSex(item) {
      this.ruleForm.gender = item.name;
      this.showSexChoice = false;
    },
    changeNoOrig() {
      if (this.ruleForm.ogState == "0") {
        this.ruleForm.idNo = "";
        this.ruleForm.birth = "";
        this.ruleForm.gender = "";
      }
      this.ruleForm.regType = "";
      this.regType = "请选择";
    },
    //回填出生年月和性别
    idChange() {
      if (this.ruleForm.regType != "reg10") {
        this.ruleForm.gender = this.formatId(this.ruleForm.idNo, 2);
        this.ruleForm.birth = this.formatId(this.ruleForm.idNo, 1);
      }
    },
    //解析身份证号码中的出生年月和性别
    formatId(card, num) {
      return getAnalysisIdCard(card, num);
    },
    //是否显示密码
    showPwd(pwd) {
      this.isPwd = !this.isPwd;
      if (this.isPwd) {
        if (pwd == "pwd") {
          this.password = "password";
        } else {
          this.repassword = "password";
        }
      } else {
        if (pwd == "pwd") {
          this.password = "text";
        } else {
          this.repassword = "text";
        }
      }
    },
    //获取符合报名条件的出生日期
    getSysPara(key) {
      this.$fetch("/api/Student/GetSysPara", { key: key }, "get").then(
        (data) => {
          if (data.res == 0) {
            if (key == "BirthBegin") {
              this.formatBirthBegin = new Date(
                Number(data.data[0].value.substring(0, 4)) +
                  "/" +
                  Number(data.data[0].value.substring(4, 6)) +
                  "/" +
                  Number(data.data[0].value.substring(6, 8))
              );
              // this.ruleForm.BirthBegin = data.data.value;
            } else if (key == "BirthEnd") {
              this.formatBirthEnd = new Date(
                Number(data.data[0].value.substring(0, 4)) +
                  "/" +
                  Number(data.data[0].value.substring(4, 6)) +
                  "/" +
                  Number(data.data[0].value.substring(6, 8))
              );
              // this.ruleForm.BirthEnd = data.data.value;
            }
          }
        }
      );
    },
    //选择出生年月
    confirmBirth() {
      this.ruleForm.birth = formatDate(
        new Date(this.currentDate).valueOf(),
        "Y-M-D"
      );
      this.showBirthChoice = false;
    },
    //确认密码
    validatorPwd(val) {
      if (val === "") {
        return false;
      } else if (val !== this.ruleForm.pwd) {
        return false;
      } else {
        return true;
      }
    },
    goLogin() {
      this.$router.push("/zmkm");
    },
    goPrivacy(type) {
      if (type === "agreement") {
        this.$router.push({
          path: "/privacy",
          query: { isPrivacy: "agreement" },
        });
      } else {
        this.$router.push({
          path: "/privacy",
          query: { isPrivacy: "police" },
        });
      }
    },
    async getSysZt() {
      try {
        const data = await getSysZt();
        if (data.res == 0) {
          localDb.set("emptyEnter", data.data);
          if (data.data.isMt != "0") {
            this.$router.push({ path: "/empty" });
          }
        }
      } catch (error) {}
    },
  },
  created() {
    this.getSysZt();
  },
  mounted() {
    this.getSysPara("BirthBegin");
    this.getSysPara("BirthEnd");
    this.getRegType("regType1");
  },
  computed: {
    regTypesArray() {
      let arr = this.regTypesArr;
      if (this.ruleForm.ogState == "0") {
        return arr.slice(0, 2);
      } else {
        return arr;
      }
    },
    isDelayApply() {
      return this.$store.state.isDelayApply;
    },
  },
  beforeRouteEnter(to, from, next) {
    const registerInfo = localDb.get("registerInfo");
    next((vm) => {
      if (from.path == "/privacy") {
        vm.ruleForm = registerInfo;
      } else {
        localDb.clear(1, "registerInfo");
      }
    });
  },
  beforeRouteLeave(to, from, next) {
    if (to.path == "/privacy") {
      localDb.set("registerInfo", this.ruleForm);
    }
    next();
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.register-box {
  .hd {
    height: 240px;
    background: url(~@/assets/images/bg_dl.png) no-repeat;
    padding-top: 60px;
    .title {
      margin: auto;
      font-size: 42px;
      color: #fff;
      position: relative;
      &::before {
        content: "";
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-image: linear-gradient(164deg, #02c7ff 2%, #0195ff 100%);
        position: absolute;
        left: 67px;
        bottom: 0;
      }
      &::after {
        content: "";
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-image: linear-gradient(162deg, #3aee91 2%, #26b050 79%);
        position: absolute;
        right: 76px;
        top: 0;
      }
    }
  }
  .bd {
    .register {
      margin-top: -120px;
      padding-top: 30px;
      text-align: left;
      border-radius: 20px;
      background-color: #fff;
      box-shadow: 0 1px 10px 0 rgba(153, 153, 153, 0.3);
      .register-tips {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        padding: 0 30px;
        color: #000;
        h3 {
          font-size: 36px;
          font-family: PingFangSC-Semibold;
        }
        .register-bd-fr {
          color: #999;
          font-size: 32px;
          a {
            color: $bsC;
          }
          &.registerdelay {
            color: #666666;
          }
        }
      }
      .van-cell {
        padding: 26px 0;
        /deep/ .van-cell__title {
          padding-left: 0;
        }
      }
      .form-menu {
        padding: 20px 30px 0;
      }
      .bottom-wrap {
        position: absolute;
        left: 0;
        bottom: -640px;
        padding: 0;
        &.delay-bottom {
          bottom: -470px;
        }
      }
    }
    .form-btn {
      padding: 0 30px 40px;
      .active {
        background-image: linear-gradient(137deg, #07a2ff 0%, #0195ff 100%);
      }
    }
    .iconfont {
      font-size: 38px;
    }
    .van-cell-nobod {
      .el-form-infos {
        position: relative;
        margin-bottom: 20px;
        &::after {
          position: absolute;
          left: 48px;
          bottom: 0;
          right: 0;
          content: "";
          height: 2px;
          background: #eee;
        }
      }
      .el-form-infos_nobod {
        padding-bottom: 0;
        margin-bottom: 0;
        &::after {
          display: none;
        }
      }
      .noOrig-tips {
        padding: 10px 0 20px;
        font-size: 28px;
        line-height: 40px;
        color: #999;
        border-bottom: 1px solid #eee;
      }
      .noOrig-choice {
        padding: 25px 0;
        border-bottom: 1px solid #eee;
        &:last-child {
          border: none;
          padding-bottom: unset;
        }
      }
      .reg-row {
        &:last-child {
          .el-form-infos {
            margin-bottom: 0;
            &::after {
              display: none;
            }
          }
        }
      }
    }
    .promise-terms {
      text-align: left;
      margin: 30px 0 60px;
      .trems-title {
        font-size: 30px;
        // font-weight: bold;
        color: #222;
        font-family: PingFangSC-Semibold;
      }
      .terms-text {
        margin: 10px 0 21px;
        p {
          line-height: 46px;
          font-size: 30px;
        }
      }
      .terms-agree {
        // height: 90px;
        line-height: 46px;
        .van-checkbox {
          height: 100%;
          font-size: 30px;
          /deep/ .van-checkbox__label {
            color: #999;
            line-height: 42px;
          }
          /deep/ .van-checkbox__icon--checked + .van-checkbox__label {
            // color: $bsC;
            // font-weight: bold;
            color: #222;
            font-family: PingFangSC-Medium;
          }
        }
        .span {
          color: #0195ff;
          font-family: PingFangSC-regular;
        }
      }
    }
    .notagree-tips {
      border-radius: 4px;
      .title {
        padding: 50px 30px 32px;
        font-size: 28px;
        color: #000;
      }
    }
    .success-regist {
      padding: 50px 0 0;
      .success-title {
        font-size: 36px;
        display: flex;
        justify-content: center;
        align-items: center;
        .icon {
          // display: inline-block;
          width: 56px;
          height: 56px;
          border-radius: 50%;
          background-color: #52c41a;
          color: #fff;
          line-height: 74px;
          margin-right: 20px;
          .van-icon-success {
            font-size: 40px;
          }
        }
        .success-tips {
          font-family: PingFangSC-Medium;
          line-height: 42px;
          font-size: 36px;
        }
      }
      .success-text {
        color: #000;
        font-size: 28px;
        padding: 32px 30px;
      }
      .gologin-btn {
        border-top: 1px solid #e5e5e5;
        .van-button {
          width: 100%;
          height: 100px;
          font-size: 36px;
          color: #0195ff;
          font-family: PingFangSC-Medium;
          border: unset;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.register-box {
  .footer-btn {
    border-top: 2px #e2e2e2 solid;
    .van-button {
      width: 50%;
      border-bottom: none;
      &:first-child {
        .van-button__content {
          color: #999;
        }
      }
    }
    .van-button--default {
      border: none;
      border-right: 2px #e5e5e5 solid;
      color: #666;
    }
    .van-button--plain.van-button--primary {
      border: none;
    }
  }

  .van-cell-input_block {
    .van-field__control--custom {
      margin-left: -30px;
    }
  }
  .form-btn .van-button {
    height: 88px;
    font-size: 36px;
  }
  .van-cell::after {
    left: 0;
    right: 0;
  }
  .password {
    .van-cell__title {
      flex: 1;
    }
    .van-field__value {
      flex: 3;
    }
  }
}
.van-cell-input_block {
  .van-checkbox__icon--checked + .van-checkbox__label {
    // color: $bsC;
    font-weight: bold;
  }
}
.not-agree {
  border-radius: unset;
  .van-dialog__message {
    color: #000;
    padding: 50px 30px 32px;
  }
}
</style>
